<template>
  <div class="box">
    <h1>组件间通信: props</h1>
    <div>count:{{ count }}</div>
    <button @click="increment(4)"> 自增</button>
    <Child :count="count" :increment="increment"></Child>
  </div>
</template>

<script lang="ts" setup>
// props传参
// props用于父子组件之间的通信
// 父组件给子组件传非函数数据,目的是为了让子组件接收到数据,进行展示
// 父组件给子组件传函数数据,目的是为了让子组件调用这个函数,让父组件修改数据


import { ref } from 'vue'
import Child from './Child.vue'
const count = ref(6)

const increment = (num = 3) => {
  count.value = count.value + num
}

</script>
